<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询</title>
    <style>
        #search{
            width: 300px;
            margin: 0 auto;
            text-align: center;
        }
        p>span{
            color: red;
        }
    </style>
</head>
<body>
    <div id="search">
        <label><input type="text" id="key"></label>
        <button id="btnSearch">查询</button>
        <div id="content">
            <p>二八佳人体似酥</p>
            <p>腰中佩剑斩愚夫</p>
            <p>虽然不见人头落</p>
            <p>暗地教君骨髓枯</p>
        </div>
    </div>
    <script>
        function $$(id) {
          return  document.getElementById(id)
        }
        var btn_search=$$("btnSearch")
        var key=$$("key")
        var content=$$("content")
        btn_search.onclick=function (){
            if (key.value)
            {
                var reg=new RegExp(key.value,"ig")
                // 将原来的html替换成新的html
                var new_content
                new_content=content.innerHTML.replace(reg,"<span>"+key.value+"</span>")
                content.innerHTML=new_content
            }
            else{
                // 如果没有内容就刷新页面
                window.location.reload()
            }
        }

    </script>
</body>
</html>